---
title: TOC
description: Table of Content
---

A Table of Contents with active anchor observer and auto scroll.

## Usage

```tsx
import * as Base from 'fumadocs-core/toc';

return (
  <Base.AnchorProvider>
    <Base.ScrollProvider>
      <Base.TOCItem />
      <Base.TOCItem />
    </Base.ScrollProvider>
  </Base.AnchorProvider>
);
```

### Anchor Provider

Watch for the active anchor using the Intersection API.

<AutoTypeTable
  path="./content/docs/headless/props.ts"
  name="AnchorProviderProps"
/>

### Scroll Provider

Scrolls (the given scroll container) to the active anchor.

<AutoTypeTable
  path="./content/docs/headless/props.ts"
  name="ScrollProviderProps"
/>

### TOC Item

The anchor item to jump to the anchor.

| Data Attribute | Values        | Description      |
| -------------- | ------------- | ---------------- |
| `data-active`  | `true, false` | Is anchor active |

## Example

<include>./toc-example.tsx</include>
